<template>
  <div class="my-tag">
    <input  v-if="isShow" :value="value" v-focus class="input" type="text" placeholder="输入标签"
    @blur="isShow = false" @keyup.enter="changeTag"
    />
    <div class="text" v-else @dblclick="isShow = true">
      {{ value }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: String
  }, 
  data() {
    return {
      isShow: false
    }
  },
  methods:{
    changeTag(e){
      console.log(e);
      
   if(e.target.value.trim() === ''){
    alert('请输入修改内容')
    return
   }
  //让输入框隐藏
  this.isShow = false
   //修改父组件数据
   this.$emit('input',e.target.value)
    
    
    }
  }
}


</script>


<style scoped></style>